<template>
  <div class="course-activity" :class="promotionTypeClass[promotion.type]">
    <div class="invite-friend"><span>￥</span>{{ promotion.price }}</div>
    <div class="invite-distance">
      <span v-if="promotion.running_status === 0" class="text">距开始仅剩</span>
      <span v-else class="text">距结束仅剩</span>
      <span class="day">{{ `${d}天` }}</span>
      <span class="time">{{ h }}</span>
      <span class="accord">:</span>
      <span class="time">{{ i }}</span>
      <span class="accord">:</span>
      <span class="time">{{ s }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    promotion: Object
  },
  data() {
    return {
      promotionTypeClass: { 1: 'dazhe', 2: 'miaosha', 3: 'kanjia', 4: 'pintuan' },
      d: '00', // 天的默认值
      h: '00', // 小时的默认值
      i: '00', // 分钟的默认值
      s: '00', // 秒的默认值
      timer: null,
      seconds: 0,
      timestamp: 0
    }
  },
  watch: {
    // 监听时间戳的变化
    timestamp(newVal, oldVal) {
      // 如果倒计时间发生变化，清除定时器，重新开始倒计时
      this.clearTimer()
      this.start()
    }
  },
  methods: {
    // 倒计时
    start() {
      // 避免可能出现的倒计时重叠情况
      this.clearTimer()
      if (this.timestamp <= 0) return
      this.seconds = Number(this.timestamp)
      this.formatTime(this.seconds)
      this.timer = setInterval(() => {
        this.seconds--
        if (this.seconds < 0) {
          return this.end()
        }
        this.formatTime(this.seconds)
      }, 1000)
    },
    // 格式化时间
    formatTime(seconds) {
      // 小于等于0的话，结束倒计时
      seconds <= 0 && this.end()
      let [day, hour, minute, second] = [0, 0, 0, 0]
      day = Math.floor(seconds / (60 * 60 * 24))
      // 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
      // hour为给后面计算秒和分等用的(基于显示天的前提下计算)
      hour = Math.floor(seconds / (60 * 60)) - day * 24
      // showHour为需要显示的小时
      let showHour = null
      showHour = hour
      minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60
      second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
      // 如果小于10，在前面补上一个"0"
      showHour = showHour < 10 ? '0' + showHour : showHour
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      day = day < 10 ? '0' + day : day
      this.d = day
      this.h = showHour
      this.i = minute
      this.s = second
    },
    // 停止倒计时
    end() {
      this.$emit('end')
      this.clearTimer()
    },
    // 清除定时器
    clearTimer() {
      if (this.timer) {
        // 清除定时器
        clearInterval(this.timer)
        this.timer = null
      }
    }
  },
  mounted() {
    this.timestamp =
      this.promotion.running_status === 0
        ? this.promotion.start_countdown
        : this.promotion.end_countdown
    this.start()
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style lang="scss" scoped>
.course-activity {
  height: 40px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-size: 100% 100%;
  &.dazhe {
    background-image: url('../../../../assets/images/promotion/discount_bg.png');
  }
  &.miaosha {
    background-image: url('../../../../assets/images/promotion/seckill_bg.png');
  }
  &.kanjia {
    background-image: url('../../../../assets/images/promotion/kanjia_bg.png');
  }
  &.pintuan {
    background-image: url('../../../../assets/images/promotion/pintuan_bg.png');
  }
  .invite-friend {
    margin-left: 30px;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    span {
      font-size: 12px;
    }
  }
  .invite-distance {
    display: flex;
    align-items: center;
    .text {
      font-size: 14px;
      font-weight: 400;
      color: #ff6b25;
      margin-right: 14px;
    }
    .day {
      font-size: 12px;
      font-weight: 400;
      color: #ff6b25;
      margin-right: 10px;
    }
    .accord {
      padding: 0 3px;
      font-size: 12px;
      font-weight: 400;
      color: #ff6b25;
    }
    .time {
      font-size: 12px;
      color: #ffffff;
      width: 20px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      background: #ff6b25;
      border-radius: 2px;
    }
  }
}
</style>
